<template>
  <div class="box">
    <h1>Canvas 交互示例</h1>
    <canvas ref="canvas" width="500" height="500"></canvas>
    <button @click="drawImageOnCanvas">绘制图片</button>
    <button @click="drawCircleOnCanvas">绘制圆形</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import imageUrl from '@/assets/images/consult-fast.png';

// 获取 canvas 元素的引用
const canvas = ref<HTMLCanvasElement | null>(null);
const ctx = ref<CanvasRenderingContext2D | null>(null);

// 创建一个 Image 对象
const img = new Image();
img.src = imageUrl; // 替换为自己的图片路径

// 组件挂载后获取 canvas 的上下文
onMounted(() => {
  if (canvas.value) {
    ctx.value = canvas.value.getContext('2d');
  }
});

// 绘制图片到 canvas 上
const drawImageOnCanvas = () => {
  if (ctx.value && img.complete) {
    ctx.value.clearRect(0, 0, 500, 500); // 清空画布
    ctx.value.drawImage(img, 0, 0, 500, 500); // 在指定位置绘制图片
  }
};

// 绘制圆形到 canvas 上
const drawCircleOnCanvas = () => {
  if (ctx.value) {
    ctx.value.clearRect(0, 0, 500, 500); // 清空画布
    ctx.value.beginPath();
    ctx.value.arc(250, 250, 50, 0, 2 * Math.PI); // 在中心位置绘制一个半径为 50 的圆形
    ctx.value.fillStyle = 'blue'; // 设置填充颜色
    ctx.value.fill(); // 填充圆形
  }
};
</script>

<style lang="scss" scoped>
.box {
  @include nl-border(#000, 'top', 1);
  canvas {
    border: 1px solid #000;
    display: block;
    margin: 20px 0;
  }

  button {
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;

    &:hover {
      background-color: #45a049;
    }
  }
}
</style>
